<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>消息列表</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			.msg_li{
				background: linear-gradient(to top right, #fff, #fff, #fff, #25b887);
			}
			img{
				border-radius: 50%;
				width: 40px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: linear-gradient(#9191ea,#fff);">
			<h1 class="mui-title"><span class="mui-icon mui-icon-email"></span>消息列表</h1>
		</div>
		<div class="mui-content" style="margin-top: -20px;">
			<ul class="mui-table-view" id="msg_list">
			</ul>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../jquery.mobile-1.4.5/jquery-1.8.3.min.js"></script>
	<script src="../js/ajax.js"></script>
	<script src="../js/conf.js"></script>
	<script>
		$(function(){
			var userId;
			mui.init({
				preloadPages:[{
					id:'message',
					url:'./message.html'
				}],
				pullRefresh : {
					container:"#msg_list",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down : {
					  style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式		 
					  callback :loadMsgList //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});
			mui.plusReady(function() {
				var messagePage = null;
				userId = plus.navigator.getCookie( "id");
				mui('#msg_list').on('tap',".msg_li",function(e) {
					var id = this.getAttribute('id');
					var tosendname = this.getAttribute('tosendname');
					var ToSendHead = this.getAttribute('ToSendHead');
					// alert(userId+id+tosendname);
					if(!messagePage){
						messagePage = plus.webview.getWebviewById('message');
					}
					//触发商品详情页面的pdetailId事件
					mui.fire(messagePage,'messageId',{
						tosendId:id,
						userId:userId,
						tosendname:tosendname,
						ToSendHead:ToSendHead,
					});
					mui.openWindow({
						id:"message"
					});
				});
				loadMsgList();
			});
			function loadMsgList(){
				// alert("loadmsglist"+userId);
				$("#msg_list").empty();
				$.ajax({
					url:backend_url + "/me/gfl.action",
					data:{
						"sendId":userId//当前用户id
					},
					type:"POST",
					dataType:"json",
					success:function(data){
						var msg_list = data.b;
						// console.log(data);// acceptId;发送者；reserved1;发送者姓名；reserved2:头像
						for(var i = 0;i<msg_list.length;i++){
							// console.log(img_url+msg_list[i].reserved2);
							var li =   `<li class="mui-table-view-cell msg_li" id=`+msg_list[i].acceptId+` tosendname=`+msg_list[i].reserved1+` ToSendHead=`+msg_list[i].reserved2+`>
											<img class="mui-media-object mui-pull-left" src=`+img_url+msg_list[i].reserved2+` onerror="this.onerror='';src='../images/person.png' " alt="头像">
											<div class="mui-media-body">
												<span>`+msg_list[i].reserved1+`</span>
												<p class='mui-ellipsis'>`+msg_list[i].messageContent+`</p>
											</div>
										</li>`;
							$("#msg_list").append(li);
						}
					},
					error:function(er){
					}
				});
				mui('#msg_list').pullRefresh().endPulldownToRefresh();
			}
		});
	</script>
</html>
